<template>
  <div class="container">
    <div v-if="userStore.userInfo?.role == 1">
      <h1 style="color: red">意见反馈单</h1>
      <div style="margin-bottom: 10px">您反馈的具体内容：</div>
      <el-input
        type="textarea"
        :rows="20"
        placeholder="请输入内容"
        v-model="feedbackContent"
      />
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button type="primary" @click="submitFeedback"> 确认提交 </el-button>
      </div>
    </div>
    <div v-else>
      <h1>意见和建议列表</h1>
      <div style="margin: 10px 0">
        <el-input
          v-model="keyword"
          placeholder="请输入内容"
          style="width: 300px"
          clearable
        />
        <el-button style="margin-left: 20px" type="primary" @click="getTable"
          >搜索</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="填写人" width="180" />
        <el-table-column prop="createTime" label="填写时间" width="180" />
        <el-table-column prop="content" label="内容概览" />
        <el-table-column prop="edit" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" @click="look(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: flex-end; margin-top: 20px"
        background
        layout="prev, pager, next"
        :total="total"
        v-model:current-page="page"
        @update:current-page="getTable"
      />
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="详情" width="500">
    <div>{{ content }}</div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reqGetSuggestionList, reqSuggestion } from "@/api/api";
import { useUserStore } from "@/stores/userInfo";
import { ElMessage } from "element-plus";
const userStore = useUserStore();
const page = ref(1);
const keyword = ref("");
const total = ref(0);
const tableData = ref([{}]);
const dialogVisible = ref(false);
const content = ref("");
const look = (row: any) => {
  console.log(row);
  content.value = row.content;
  dialogVisible.value = true;
};
const feedbackContent = ref<string>("");
const submitFeedback = async () => {
  if (feedbackContent.value.trim() === "") {
    ElMessage.error("反馈内容不能为空");
    return;
  }
  // 这里可以添加提交反馈的逻辑
  try {
    const res: any = await reqSuggestion({ content: feedbackContent.value });
    console.log(res);

    if (res.code == 200) {
      ElMessage.success("提交成功,感谢您的反馈！");
    }
  } catch (error) {}
};

const getTable = async () => {
  const res = await reqGetSuggestionList({
    page: page.value,
    pageSize: 10,
    keyword: keyword.value,
  });
  tableData.value = res.data.records;
  total.value = res.data.totalRow;
};
getTable();
</script>

<style scoped>
.container {
  padding: 40px 150px;
}
</style>
